<!--  -->
<template>
<div class="conter">
    <el-table
    :data="tableData"
    style="width: 100%"> 
    <el-table-column
      label="管理员编号"
      width="180"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.Aid}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="管理员账号"
      width="180"
      align="center"
      >
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.AdminUser}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="负责区域"
      align="center"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.AdminArea}}</span>
      </template>
    </el-table-column>
    
     <el-table-column
      label="姓名"
      width="180"
      align="center"
      >
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.RealName }}</p>
          <p>联系电话: {{ scope.row.phone }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.RealName}}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope"
      >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">注销账号</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
   background
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :page-count="pagecount"
    :current-page="page"
    class="fenye">
</el-pagination>
</div>
</template>

<script>
export default {
data() {
return {
    tableData:[],
    pagecount:0,
    page:1
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
    this.GetAdmin(1)
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
    
},
methods: {
        DeleteAdmin(){
            
        },
        GetAdmin(val){
            // console.log("获取用户")
           var url=`http://localhost:3000/GetAdmin?page=${val}`
           this.axios.get(url).then(res=>{
          this.tableData=res.data.results.datas
          this.page=res.data.results.page
          this.pagecount=res.data.results.pagecount
        })
        
        },
        handleCurrentChange(val){
      // console.log("点击上一页或者下一页按钮",val)
      this.GetAdmin(val)
       },
      handleDelete(index, row) {
        // console.log(index, row);
        var url=`http://localhost:3000/AdminDelete?Aid=${row.Aid}`
            this.axios.get(url).then(res=>{
            console.log(res)
            // location.reload();
            this.GetAdmin(this.page)
            // alert(res.data.message)
            this.open1()
            })
      },
      open1() {
        this.$notify({
          title: '成功',
          message: '账号注销成功',
          type: 'success'
        });
      },
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
    .conter{
        margin-left: 5%;
        position: relative;
        min-height: 562px;
    }
    .fenye{
        display: block;
        position: absolute;
        margin-left: 33%;
        bottom: 20px;
    }
</style>